<template>
  <!--开票审请-->
  <BasicModal :title="getTitle" :width="500" :canFullscreen="false" :centered="true"
              @register="registerModal" @ok="handleSubmit" destroyOnClose
  >
    <a-form ref="registerForm" :model="model" :rules="validatorRules" :labelCol="{ span: 5 }" :wrapperCol="{ span: 14 }">
      <a-input type="hidden" v-model:value="model.id"/>
      <a-input type="hidden" v-model:value="model.invoiceSflx"/>
      <a-input type="hidden" v-model:value="model.invoiceOrderId"/>
      <a-input type="hidden" v-model:value="model.dwmc"/>

      <a-form-item label="发票类型" name="invoiceType">
        <JDictSelectTag
          v-model:value="model.invoiceType"
          dictCode="invoiceType"
          placeholder="全部"
          :maxTagCount="0"
          :dropdownStyle="{ width: '120px', overflow: 'auto' }"
          :dropdownMatchSelectWidth="false"
          :allowClear="true"
        />
      </a-form-item>

      <a-form-item label="出票日期" name="invoiceDate">
        <a-date-picker
          v-model:value="model.invoiceDate"
          valueFormat="YYYY-MM-DD"
          placeholder=""
          style="width: 132px"
        />
      </a-form-item>

      <a-form-item label="开票金额" >
        <div v-for="item in model.moneys">
          {{item.index}}：<a-input-number autocomplete="off" v-model:value="item.je" @change="moneysBlur"/>
        </div>
      </a-form-item>

      <a-form-item label="金额合计" name="skje">
        <span class="text-red-500 font-bold size1">{{model.skje}}</span>
      </a-form-item>

      <a-form-item label="发票内容" >
        <a-input type="text" autocomplete="off" v-model:value="model.content" />
      </a-form-item>

      <a-form-item label="备注" >
        <a-input type="text" autocomplete="off" v-model:value="model.bz"/>
      </a-form-item>

    </a-form>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive, watch, watchEffect, nextTick } from "vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import { invoiceInfoAdd, invoiceInfoById } from "../types/invoice.api";
import { useMessage } from "/@/hooks/web/useMessage";
import { RuleObject, ValidateErrorEntity } from "ant-design-vue/es/form/interface";

import moment from 'dayjs'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { render } from "/@/utils/common/renderUtils";

const isUpdate = ref(false);
const { createMessage: $message } = useMessage();

const emit = defineEmits(['success', 'register']);

//标题
const getTitle = computed(() => (!unref(isUpdate) ? '开票审请' : '编辑'));

//表单modal
let info   = reactive<any>({})
let model  = reactive<any>({
  invoiceType: '1',
  invoiceDate: moment().format("YYYY-MM-DD"),
  dwmc: '',
  moneys: [], //申请金额 - 一张发票最大开 9万
});
let businessId = ref("");

//表单赋值 async
const [registerModal, { closeModal }] = useModalInner( async (data) => {
  let record = data.record
  isUpdate.value = data.isUpdate
  let params = {
    id: record.id,
    businessId: record.businessId,
    copy: record.copy
  }
  await invoiceInfoById(params).then((res) => {
    if (res.success) {
      let result = res.result
      Object.assign(model, result)
    } else {
      $message.error(res.message);
    }
  })
  //新增
  if(!isUpdate.value) {
    model.invoiceType = '1'
    model.invoiceDate = moment().format("YYYY-MM-DD")
    model.invoiceOrderId = record.businessId
    model.type = record.type
  }
});

//------------------------------------------------------
function moneysBlur() {
  let moneys = model.moneys;
  model.skje = 0;
  for (let i = 0; moneys.length > i; i++) {
    if (moneys[i].je == 0) {
      continue;
    }
    if (!moneys[i].je) {
      moneys[i].je = 0;
    }
    model.skje = model.skje + moneys[i].je;
  }
}

//自定义
let validateHj = async (rule: RuleObject, value: string) => {
  if (model.type === '2' && value == '') {
    return Promise.reject('不能为空!');
  } else {
    return Promise.resolve();
  }
};
const validatorRules = {
  invoiceType: [{ required: true, message: "不能为空!" }],
  invoiceDate: [{ required: true, message: "不能为空!" }],
  hj: [
    { required: true, message: "不能为空!" },
    {
      validator: (_, value) => {
        if (value == 0) {
          return Promise.reject('请输入申请金额！');
        }
        return Promise.resolve();
      },
    }
  ],
};

//表单提交事件
const registerForm = ref();
function handleSubmit() {
  registerForm.value.validate().then(async () => {
    try {
      await invoiceInfoAdd(model).then((res) => {
        if (res.success == true) {
          closeModal();
          emit("success");
          $message.success("操作成功！")
        } else {
          $message.warn(res.message)
        }
      });
    } finally {

    }
  }).catch((error: ValidateErrorEntity<any>) => {
    console.log("error", error);
  });
}


</script>

<style lang="less" scoped>
.formtable .inputxt {
  border: 1px solid #D7D7D7;
  border-radius: 3PX;
  padding: 7px 0 7px 5px;
  line-height: 14PX;
  font-size: 12px;
  display: inline-block;
  width: 200px;
}

.formtable .input_text:focus {
  border: 1px solid #06F;
  box-shadow: inset 0 1px 2px rgba(0, 102, 255, 0.3);
}

.formtable select {
  padding: 6px 2px;
  width: 155px;
}
.Validform_label {
  font-size: 12px;
  padding: 5px;
  white-space: nowrap;
}
.formtable {
  width: 100%;
  background-color: #ddd;
  align: right;
}
.formtable tr {
  background-color: #FAFAFA;
  align: right;
}
</style>
